<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">


    <style type="text/css">
        .login-div{
            text-align: center;
        }

        form{
            width: 250px;
            margin: 0 auto;
        }


    </style>
</head>
<body>

<div class="login-div">
    <form>
        用户名：<input type="text" id="username" name="username" />
        密码：  <input type="password" id="password" name="password" />
        <button id="login-btn">登录</button>
    </form>
</div>


<script src="/js/jquery-1.11.3.min.js"></script>

<script>
    $(function() {
        $("#login-btn").click(function (event) {
            // 阻止表单默认提交
            event.preventDefault();

            var username = $("#username").val(), password = $("#password").val();
            if(username==""){
                alert("用户名不能为空！");
                return;
            }
            if(password==""){
                alert("密码不能为空！");
                return;
            }

            var param={"username": username, "password": password}

            // 提交验证
            $.ajax({
                type: "POST",
                url: "/api/user/login",
                contentType: "application/json",
                data: JSON.stringify(param),
                success: function (result) {
                    console.log(result)
                    if(result.code==200){
                        window.localStorage.setItem("token",result.data)
                        window.location.href="users.html";
                    }else{
                        alert(result);
                    }
                }
            });


        });
    });

</script>
</body>
</html>